import React, { PureComponent } from 'react';
import { List, ActionSheet, InputItem, Picker, Button, WhiteSpace } from 'antd-mobile';
import { connect } from 'dva';
import { createForm, formShape } from 'rc-form';
import self from './index.less'
let wrapProps;
if (new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent)) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
class UserInformation extends PureComponent {
    state = {
        type: 'money',
    }
    constructor(props, context) {
        super(props, context)
        this.state = {
            self: {
                ...JSON.parse(localStorage.getItem("info")),
                ...JSON.parse(localStorage.getItem("msg")),
            }
        }
    }
    componentWillMount() {
        this.props.dispatch({ type: "userInfoMation/getUserNation", payload: {} })
        this.props.dispatch({ type: "userInfoMation/loadBasePeopleList", payload: {} })
    }
    test() {
        this.props.dispatch({ type: "auth/redirect", payload: { url: "/stuIndex" } })
    }
    // cycle
    render() {
        const { type } = this.state;
        const { Item } = List, { Brief } = Item;
        return (
            <div className="self">
                <InputItem type={this.state.type} value={this.state.self.nameSpell} placeholder="请输入拼音名" clear onChange={v => this.setState({ self: { ...this.state.self, nameSpell: v } })}
                    moneyKeyboardAlign="right" >拼音名</InputItem>
                <InputItem type={type} value={this.state.self.perEnglishName} placeholder="请输入英文名" clear onChange={v => this.setState({ self: { ...this.state.self, perEnglishName: v } })}
                    moneyKeyboardAlign="right" >英文名</InputItem>
                {
                    this.props.nation.length == 0 ? null :
                    <Picker
                    data={this.props.nation}
                    title="请选择国别"
                    cascade={false}
                    extra="请选择国别"
                    value={this.state.self.nationCode}
                    onChange={v => this.setState({ self: { ...this.state.self, nationCode: v } })}
                    onOk={v => this.setState({ self: { ...this.state.self, nationCode: v } })}
                >
                    <List.Item arrow="horizontal">国别</List.Item>
                </Picker>
                }
                <InputItem type={type} placeholder="请输入籍贯" clear>籍贯</InputItem>
              
                {   this.props.nationality.length == 0 ? null : 
                    <Picker title="请选择民族"
                        data={this.props.nationality}    
                        cascade={false}
                        extra="请选择民族"
                        value={this.state.self.peopleCode}
                        onChange={v => this.setState({ self: { ...this.state.self, peopleCode: v } })}
                        onOk={v => this.setState({ self: { ...this.state.self, peopleCode: v } })}
                >
                    <List.Item arrow="horizontal">民族</List.Item>
                </Picker>
                }
                <InputItem type={type} value={this.state.self.EMAIL} placeholder="请输入邮箱" clear onChange={v => this.setState({ self: { ...this.state.self, EMAIL: v } })}
                    moneyKeyboardAlign="right">邮箱</InputItem>
                <InputItem type={type} value={this.state.self.perAddress} placeholder="请输入通讯地址" clear onChange={v => this.setState({ self: { ...this.state.self, perAddress: v } })}
                    moneyKeyboardAlign="right" >通讯地址</InputItem>
                <InputItem type={type} value={this.state.self.mobilePhone} placeholder="请输入移动电话" clear onChange={v => this.setState({ self: { ...this.state.self, mobilePhone: v } })}
                    moneyKeyboardAlign="right" >移动电话</InputItem>
                <InputItem type={type} value={this.state.self.famillyAddress} placeholder="请输入家庭地址" clear onChange={v => this.setState({ self: { ...this.state.self, famillyAddress: v } })}
                    moneyKeyboardAlign="right" >家庭地址</InputItem>
                <InputItem type={type} value={this.state.self.famTelephone} placeholder="请输入家庭电话" clear onChange={v => this.setState({ self: { ...this.state.self, famTelephone: v } })}
                    moneyKeyboardAlign="right" >家庭电话</InputItem>
                <InputItem type={type} value={this.state.self.QQ} placeholder="请输入QQ" clear onChange={v => this.setState({ self: { ...this.state.self, QQ: v } })}
                    moneyKeyboardAlign="right" >QQ</InputItem>
                <InputItem type={type} value={this.state.self.WXZH} placeholder="请输入微信号" clear onChange={v => this.setState({ self: { ...this.state.self, WXZH: v } })}
                    moneyKeyboardAlign="right" >微信号</InputItem>
                <InputItem type={type} value={this.state.self.perOneCardNum}  placeholder="请输入一卡通号" clear onChange={v => this.setState({ self: { ...this.state.self, perOneCardNum: v } })}
                    moneyKeyboardAlign="right" >一卡通号</InputItem>
                {/* <div className={self.btn}>
                    <Button type="primary">提交</Button><WhiteSpace />
                </div> */}

            </div>
        );
    }
}
function mapStateToProps(state) {
    return {
        nation: state.userInfoMation.nation,
        nationality:state.userInfoMation.nationality    
    }
}
export default connect(mapStateToProps)(UserInformation);
